<template>
<el-main class="main">
  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#67C23A"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      style="position: absolute;top: 0px;left: 0px;width: 100%;overflow: auto"
  >
    <el-menu-item index="1">文章主页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>文章导航</template>
      <el-menu-item index="2-1">导航1</el-menu-item>
      <el-menu-item index="2-2">导航2</el-menu-item>
      <el-menu-item index="2-3">导航3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3" >文章推荐</el-menu-item>
    <el-menu-item index="4">发布文章</el-menu-item>
    <el-menu-item index="5" disabled>我的文章</el-menu-item>
  </el-menu>
  <el-breadcrumb style="position: absolute;left: 0px;width: 100%;overflow: auto;top:70px">
    <el-breadcrumb-item ><a>导航</a></el-breadcrumb-item>
    <el-breadcrumb-item ><a>{{LocationList}}</a></el-breadcrumb-item>
  </el-breadcrumb>
  <slot></slot>
</el-main>
</template>

<script lang="ts">
//这里在使用相关的回调函数时需要先引入
import {defineComponent,toRefs} from 'vue';
import {ElMain} from "element-plus";
//每次注册的时候需要引入包
export default defineComponent({
  //这个是注册组件
  //入口函数
  name: 'main',
  components: {ElMain,
  },
  //接受父级组件的参数
  props:{
    LocationList:String,
    flag:Boolean
  },

  setup(props) {
    const {LocationList,flag}=toRefs(props)
    return {
    }

  }
});
</script>

<style scoped>
.main{
  position: relative;
  top:250px;
  left: auto;
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
